<template>
  <!-- 导航条 -->
  <div>
    <ind-header />
    <div class="center">
      <el-container>
        <el-header height="300px">
          <!-- 轮播图 -->
          <swiper
            class="myswiper"
            ref="swiper"
            @mouseover.native="stopSwiper"
            @mouseout.native="startSwiper"
            :options="swiperOption"
          >
            <!-- 下方后期引入数据 v-for -->
            <swiper-slide>
              <img id="sw-img" src="../assets/banner01.jpg" />
            </swiper-slide>
            <swiper-slide>
              <img id="sw-img" src="../assets/banner02.jpg" />
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
          </swiper>
        </el-header>
        <el-container>
          <el-aside width="180px">
            <el-menu
              router
              :default-active="$route.path"
              text-color="red"
              active-text-color="blue"
              style="height: 500px"
            >
              <el-menu-item index="/store/dog"
                ><span>
                  <img
                    id="el-menu-img"
                    class="el-menu-img"
                    src="../assets/dog.png"
                  />
                </span>
                狗狗用品
                <span><img id="el-menu-img" src="../assets/right.png" /></span
              ></el-menu-item>
              <el-menu-item index="/store/cat"
                ><span>
                  <img
                    id="el-menu-img"
                    class="el-menu-img"
                    src="../assets/dog.png"
                /></span>
                猫猫用品
                <span><img id="el-menu-img" src="../assets/right.png" /></span
              ></el-menu-item>
              <el-menu-item index="/store/toy">
                <span>
                  <img
                    id="el-menu-img"
                    class="el-menu-img"
                    src="../assets/dog.png"
                  />
                </span>
                玩具用品
                <span><img id="el-menu-img" src="../assets/right.png" /></span>
              </el-menu-item>
            </el-menu>
          </el-aside>
          <el-main>
            <!-- ----- -->
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </div>
    <ind-footer />
  </div>
</template>

<script>
import IndHeader from "@/components/IndHeader.vue";
import IndFooter from "@/components/IndFooter.vue";
export default {
  components: { IndHeader, IndFooter },
  data() {
    return {
      // 轮播图配置项
      swiperOption: {
        // 特效 effect
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
  methods: {
    stopSwiper() {
      // console.log(this.$refs);
      this.$refs.swiper.$swiper.autoplay.stop();
    },
    startSwiper() {
      this.$refs.swiper.$swiper.autoplay.start();
    },
  },
};
</script>

<style scoped>
.center {
  margin: 0 auto;
  width: 1440px;
}
#sw-img {
  width: 100%;
  height: 100%;
}
#el-menu-img {
  width: 25px;
  height: 25px;
  vertical-align: baseline;
  margin-top: 18px;
}
</style>

// swiper 样式
<style>
.swiper-button-prev,
.swiper-button-next {
  width: 55px;
  height: 55px;
  background: url(../assets/left.png) no-repeat;
  background-size: 60px 60px;
  color: transparent;
  margin: 0 20px;
  top: 41%;
}
.swiper-button-next {
  transform: rotateY(180deg);
}
.swiper-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.swiper-pagination-bullet{
  width: 16px;
  height: 16px;
  background-color: #ad6e3f
}
</style>

// element 样式
<style>
.el-menu {
  vertical-align: middle;
}
.el-menu-item {
  font-size: 16px;
  font-weight: bold;
  color: #ad6e3f !important;
}
.el-menu-img {
  margin-right: 2px;
}
.el-header {
  padding: 0;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #fff;
  color: #333;
  text-align: center;
}

.el-main {
  background-color: #faf8e4;
  color: #333;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>


